<template>
    <el-card class="box-card">
        <el-form ref="queryForm" :model="queryParams" label-width="200px">
            <el-form-item v-if="this.id" label="新闻ID">
                <el-input v-model="queryParams.id" readonly clearable />
            </el-form-item>
            <el-form-item label="新闻标题">
                <el-input v-model="queryParams.title" clearable />
            </el-form-item>
            <el-form-item label="新闻分类">
                <el-select
                    v-model="queryParams.categoryId"
                    placeholder="请选择分类"
                >
                    <el-option
                        v-for="item in typeList"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="是否发布">
                <el-select
                    v-model="queryParams.status"
                    placeholder="请选择分类"
                >
                    <el-option
                        v-for="item in statusList"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="是否推荐">
                <el-select
                    v-model="queryParams.recommend"
                    placeholder="请选择分类"
                >
                    <el-option
                        v-for="item in recoList"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                    />
                </el-select>
            </el-form-item>
            <el-form-item v-if="id" label="作者UID(这里临时填写00000)">
                <el-input v-model="queryParams.uid" clearable />
            </el-form-item>
            <el-form-item v-if="!id" label="作者UID(这里临时填写11111)">
                <el-input v-model="queryParams.uid" clearable />
            </el-form-item>
            <el-form-item label="新闻封面">
                <input ref="imgInputer_cover" type="file" />
                <el-button type="primary" @click="putCover"> 上传 </el-button>
                <span v-if="coverProgesss">上传进度:{{ coverProgesss }}%</span>
                <br />
                <img
                    v-if="queryParams.cover"
                    :src="queryParams.cover"
                    class="logo-img"
                />
            </el-form-item>
            <el-form-item label="视频">
                <input ref="imgInputer_video" type="file" />
                <el-button type="primary" @click="putVideo"> 上传 </el-button>
                <span v-if="videoProgesss">上传进度:{{ videoProgesss }}%</span>
                <br />
                <video
                    v-if="queryParams.video"
                    controls
                    :src="queryParams.video"
                    class="logo-img"
                />
            </el-form-item>
            <el-form-item label="新闻内容">
                <!--            <el-input clearable v-model="queryParams.content"/>-->
                <div v-if="editorConfig" style="border: 1px solid #ccc">
                    <Toolbar
                        style="border-bottom: 1px solid #ccc"
                        :editor="editor"
                        :default-config="toolbarConfig"
                        :mode="mode"
                    />
                    <Editor
                        v-model="queryParams.content"
                        style="height: 500px; overflow-y: hidden"
                        :default-config="editorConfig"
                        :mode="mode"
                        @onCreated="onCreated"
                    />
                </div>
            </el-form-item>
            <el-button
                v-if="id"
                type="primary"
                class="submit-button"
                @click="addNews"
            >
                提交
            </el-button>
            <el-button
                v-if="!id"
                type="primary"
                class="submit-button"
                @click="addNews"
            >
                提交
            </el-button>
        </el-form>
    </el-card>
</template>
<script>
import COS from 'cos-js-sdk-v5';
import { addNews, getNewsDetail } from '@/api/admin/news-api';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
export default {
    components: { Editor, Toolbar },
    data() {
        return {
            coverProgesss: 0,
            videoProgesss: 0,
            statusList: [
                { key: '1', value: '发布' },
                { key: '2', value: '不发布' },
            ],
            recoList: [
                { key: '1', value: '推荐' },
                { key: '2', value: '不推荐' },
            ],
            typeList: [
                { key: '1', value: '新闻' },
                { key: '2', value: '活动' },
                { key: '3', value: '赛事' },
                { key: '4', value: '公告' },
                { key: '5', value: '综合' },
            ],
            queryParams: {
                uid: '11111',
                categoryId: '1',
                cover: '',
                video: '',
                title: '请输入新闻标题',
                content: '请输入新闻内容',
                status: '1',
                recommend: '1',
            },
            toolbarConfig: {},
            editorConfig: null,
            mode: 'default', // or 'simple'
            editor: null,
            html: '',
        };
    },
    computed: {
        id: function () {
            return this.$route.query.id;
        },
    },
    mounted() {
        addEventListener('keydown', (e) => {
            if (e.keyCode === 27) {
                this.editor.unFullScreen();
            }
        });
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        let that = this;
        this.editorConfig = {
            placeholder: '请输入内容...',
            MENU_CONF: {
                uploadImage: {
                    async customUpload(file, insertFn) {
                        // JS 语法
                        console.log('@@@ mmp @@@', file);
                        const Bucket = 'clan-img-1304137023';
                        const Region = 'ap-shanghai';
                        const fileName = `${Date.now()}_${file.name}`;
                        that.cos.putObject(
                            {
                                Bucket,
                                Region,
                                Key: `client/admin_test/${fileName}`,
                                StorageClass: 'STANDARD',
                                Body: file,
                                onProgress: () => {
                                    // this.coverProgesss = 100 * progressData.percent;
                                },
                            },
                            (err, data) => {
                                console.log('@@@ upload result @@@', data);
                                insertFn(
                                    'https://' + data.Location,
                                    fileName,
                                    'https://' + data.Location
                                );
                                // if (err) return this.coverProgesss = "上传出错";
                                // this.queryParams.cover = 'https://' + data.Location;
                            }
                        );
                        return;
                    },
                },
            },
        };
    },
    beforeUnmount() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy(); // 组件销毁时，及时销毁编辑器
    },
    created() {
        this.initCOS();
        if (this.id) {
            this.getDetail();
        }
    },
    methods: {
        getDetail() {
            getNewsDetail({ id: this.$route.query.id })
                .then((res) => {
                    console.log('@@@ 详情 @@@', res);
                    if (res.code != 200) return;
                    this.queryParams = res.message;
                })
                .catch((e) => {
                    console.log('@@@ xiangiqng error @@@', e);
                });
        },
        initCOS() {
            this.cos = new COS({
                // SecretId: 'AKIDIRM4XmocAfvwkJcnlUxBB0pPjodDYR6X',
                // SecretKey: 'GH4KL6kBNK2VmpdDZjfLn0xZzCBvQhji',
                SecretId: 'AKIDhBcs04OrWwOfgSt0mLtKXVMhqkbCKkT3',
                SecretKey: '4w2vZ2yi4C7xYMN8cFsLuJwRimvnSvId',
            });
        },

        addNews() {
            // console.log('@@@ 参数  @@@', this.queryParams);
            // console.log(this.html,12456789);
            addNews(this.queryParams)
                .then((res) => {
                    // console.log('@@@ add news result @@@', res);
                    if (res.code == 200) {
                        this.$message.success('添加新闻成功');
                        setTimeout(() => {
                            this.$router.push('/admin/news/news-list');
                        }, 1000);
                    }
                })
                .catch((e) => {
                    console.log('@@@ add news error @@@', e);
                });
        },
        putCover() {
            const file = this.$refs.imgInputer_cover.files[0];
            console.log('@@@ ?? ', file);
            // const Bucket = "abc-1309914888";
            // const Region = "ap-nanjing";
            const Bucket = 'clan-img-1304137023';
            const Region = 'ap-shanghai';
            this.cos.putObject(
                {
                    Bucket,
                    Region,
                    Key: `client/admin_test/${file.name}`,
                    StorageClass: 'STANDARD',
                    Body: file,
                    onProgress: (progressData) => {
                        this.coverProgesss = 100 * progressData.percent;
                    },
                },
                (err, data) => {
                    if (err) return (this.coverProgesss = '上传出错');
                    this.queryParams.cover = 'https://' + data.Location;
                }
            );
        },

        putVideo() {
            const file = this.$refs.imgInputer_video.files[0];
            // const Bucket = "abc-1309914888";
            // const Region = "ap-nanjing";
            const Bucket = 'clan-img-1304137023';
            const Region = 'ap-shanghai';
            this.cos.putObject(
                {
                    Bucket,
                    Region,
                    Key: `client/admin_test/${file.name}`,
                    StorageClass: 'STANDARD',
                    Body: file,
                    onProgress: (progressData) => {
                        this.videoProgesss = 100 * progressData.percent;
                    },
                },
                (err, data) => {
                    if (err) return (this.videoProgesss = '上传出错');
                    this.queryParams.video = 'https://' + data.Location;
                }
            );
        },
        onCreated(editor) {
            this.editor = Object.seal(editor);
        },
    },
};
</script>
<style scoped>
@import '~@wangeditor/editor/dist/css/style.css';

.logo-img {
    width: 200px;
    height: auto;
}
.box-card {
    padding-bottom: 20px;
}
.submit-button {
    position: absolute;
    bottom: 10px;

    left: 220px;
}
</style>
